{extend name="public/container"}
{block name="head_top"}
<style type="text/css">
/*.el-container {
    background-color: #fff;
    color: #495060;
}*/
.el-drawer__header {color: #000; margin-bottom: 20px}
.el-footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    border-top: 1px solid #e6e6e6;
}
.el-header {
    align-items: center;
    /*margin-bottom: 20px;*/
}
.user-info-wrap {
    margin-bottom: 20px;
}
.user-info-wrap th {
    background-color: #f2f2f2;
    font-weight: normal;
}
.user-info-wrap td,.user-info-wrap th {
    width: calc(100% / 6);
    text-align: center;
    padding: 4px 0;
}
.user-info-wrap table {border-collapse:collapse;}
.user-info-wrap table,.user-info-wrap tr,.user-info-wrap td,.user-info-wrap th {
    border: 1px solid var(--borderColor);
    font-size: 14px;
}

.el-footer .consume-summary-wrap {
    width: 85%;
}
.console-wrap .console-desc {
    width: 100%;
}

.package .console-desc {
    margin-bottom: 10px;
    /*border-bottom: 1px dashed var(--borderColor);*/
    padding-bottom: 10px;
}

.console-main-wrap{color: #595959;font-size: 12px}
.console-title {background-color: #f3f3f3; padding: 8px 0; }
.console-title-item{text-align: center;display: flex; align-items: center; justify-content: center;}
.console-title-item:nth-child(1) {
    width: 20%;
    padding-right: 6px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
}
.console-title-item:nth-child(2) {
    width: 10%;
    display: flex;
    align-items: center;
}
.console-title-item:nth-child(3) {
    width: 20%;
}
.console-title-item:nth-child(4) {
    width: 17%;
}
.console-title-item:nth-child(5) {
    width: 17%;
}
.console-title-item:nth-child(6) {
    width: 8%;
}

.selected-package-name-wrap {
    margin-bottom: 10px;
    background-color: #f8f8f8;
    padding: 4px 10px;
}
.console-item-wrap:not(:last-child){border-bottom: 1px solid var(--borderColor);}
.console-item-wrap {
    padding: 10px 0px;
    margin-bottom: 14px;
}
.el-input-number {
    width: 100px;
}
.item-wrap-right {
    max-height: calc(100vh - 200px);
    overflow-y: scroll;
}

.consume-summary-item-number {
    font-size: 30px;
    font-weight: 500;
    margin-left: 10px;
}
.enhence {
    color: #F56C6C;
}
::-webkit-scrollbar {
    width: 0px;
}
.checkout-button-wrap .el-button {padding: 20px 50px}
.el-main {margin-bottom: 60px;}
</style>
{/block}
{block name="content"}
<div id="myApp" v-cloak>
    <el-container>
        <el-header class="flex flex-between">
            <div style="width:400px">
                <el-input size="mini" placeholder="请输入手机号查询" v-model="user_mobile" />
                    <el-button slot="append" icon="el-icon-search" @click="searchUser()">搜索</el-button>
                </el-input>
            </div>

            <div>
                <el-button size="mini" type="primary" style="padding:8px 20px" @click="openCard()">开卡</el-button>
                <el-button size="mini" type="primary" style="padding:8px 20px" @click="recharge()" :disabled="!user_info.uid">充值</el-button>
            </div>
        </el-header>

        <el-main>
            <!-- 搜索出来的用户信息-->
            <div class="user-info-wrap" v-if="user_info.uid > 0">
                <el-descriptions class="margin-top" title="" :column="3" size="mini" border>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-user"></i>
                            姓名
                        </template>
                        {{user_info.full_name}}
                    </el-descriptions-item>

                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-mobile-phone"></i>
                            手机号
                        </template>
                        {{ user_info.mobile }}
                    </el-descriptions-item>

                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-location-outline"></i>
                            所属{:lang('School')}
                        </template>
                        {{ user_info.school_name }}
                    </el-descriptions-item>

                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-bank-card"></i>
                            卡类型
                        </template>

                        <template v-if="user_info.level_name">
                            <el-tag size="small">{{user_info.level_name}}</el-tag>
                        </template>
                        <template v-else>普通会员</template>
                    </el-descriptions-item>

                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-discount"></i>
                            折扣率
                        </template>
                        {{ user_info.discount || '无折扣' }}
                    </el-descriptions-item>

                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-wallet"></i>
                            总余额
                        </template>
                        {{ user_info.total_money }}
                    </el-descriptions-item>

                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-money"></i>
                            实收余额
                        </template>
                        {{ user_info.now_money }}
                    </el-descriptions-item>

                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-collection"></i>
                            赠送余额
                        </template>
                        {{ user_info.gift_money }}
                    </el-descriptions-item>
                </el-descriptions>
            </div>

            <!-- 服务、商品、套餐选择窗口-->
            <div class="content-wrap flex">
                <div class="item-wrap-left">
                    <div class="flex">
                        <el-button size="mini" @click="setItemType('service')" :class="[itemType=='service' ? 'itemActive' : '']">{:lang('Service')}</el-button>
                        <el-button size="mini" @click="setItemType('goods')" :class="[itemType=='goods' ? 'itemActive' : '']">{:lang('Goods')}</el-button>
                        <el-button size="mini" @click="setItemType('package')" :class="[itemType=='package' ? 'itemActive' : '']">{:lang('Package')}</el-button>
                        <el-button size="mini" @click="setItemType('bought')" :class="[itemType=='bought' ? 'itemActive' : '']" v-if="user_info.uid > 0">已购</el-button>
                    </div>

                    <div class="flex flex-center" style="margin:14px 0">
                        <el-input v-model="where.name" placeholder="请输入名称" size="mini">
                            <el-button slot="append" icon="el-icon-search" @click="doLoadRows"></el-button>
                        </el-input>
                    </div>

                    <div>
                        <el-table
                            border
                            :data="rows"
                            style="width: 100%"
                            size="mini">
                            <!-- <el-table-column
                                prop="id"
                                label="ID"
                                width="60"
                                align="left">
                            </el-table-column> -->

                            <el-table-column
                                prop="item_type"
                                label="项目类型"
                                v-if="itemType=='bought'"
                                align="left">
                            </el-table-column>

                            <el-table-column
                                prop="name"
                                label="项目名称"
                                align="left">
                            </el-table-column>

                            <el-table-column
                                prop="price"
                                label="单价"
                                v-if="itemType!='bought'"
                                width="60"
                                align="left">
                            </el-table-column>

                            <el-table-column
                                label="操作"
                                width="60"
                                align="left">
                                <template slot-scope="scope">
                                    <el-link type="primary" size="mini" :underline="false" @click="doItemSelect(scope.row)">选择</el-link>
                                </template>
                            </el-table-column>
                        </el-table>

                        <div class="pagination" v-if="itemType != 'bought'" style="margin-bottom:0">
                            <el-pagination
                                small
                                :hide-on-single-page="true"
                                layout="prev, pager, next"
                                :total="rowsCount"
                                :page-size="where.limit"
                                @current-change="doLoadRows">
                            </el-pagination>
                        </div>
                    </div>
                </div>

                <div class="item-wrap-right">
                    <div class="console-wrap">
                        <div class="console-title flex">
                            <div class="flex console-desc">
                                <div class="console-title-item">
                                    {:lang('Service')}/{:lang('Goods')}
                                </div>
                                <div class="console-title-item">
                                    单价
                                </div>
                                <div class="console-title-item">
                                    数量
                                </div>
                                <div class="console-title-item">
                                    折扣(X%)
                                </div>
                                <div class="console-title-item">
                                    实收金额
                                </div>
                                <div class="console-title-item">
                                    操作
                                </div>
                            </div>
                        </div>

                        <div class="console-main-wrap">
                            <template v-if="order_info.length > 0">
                                <template v-for="(item,okey) in order_info">
                                    <div class="console-item-wrap">
                                        <template v-if="item.pck_id > 0">
                                            <div class="selected-package-name-wrap flex flex-center">
                                                <div class="console-title-item">{:lang('Package')}：{{ item.pck_name }}</div>
                                                <div class="console-title-item">{{ item.price }}</div>
                                                <div class="console-title-item">
                                                    <el-input-number
                                                        :controls="false"
                                                        size="mini"
                                                        :step="1"
                                                        :step-strictly="true"
                                                        :min="1"
                                                        :max="item.max_nums"
                                                        @change="(oldval, newval) => doCalcNewAmtByType(oldval, newval , okey , 'qty')"
                                                        :disabled="item.bought_id > 0 && item.valid_type == 1 "
                                                        v-model="item.qty">
                                                    </el-input-number>
                                                </div>
                                                <div class="console-title-item">
                                                    <el-input-number
                                                        :controls="false"
                                                        size="mini"
                                                        :step="1"
                                                        :step-strictly="true"
                                                        :min="0"
                                                        :max="100"
                                                        @change="(oldval, newval) => doCalcNewAmtByType(oldval, newval , okey , 'discount')"
                                                        :disabled="item.bought_id > 0"
                                                        v-model="item.discount">
                                                    </el-input-number>
                                                </div>
                                                <div class="console-title-item">
                                                    <el-input-number
                                                        :controls="false"
                                                        size="mini"
                                                        :min="0"
                                                        :max="item.price*item.qty*1000"
                                                        :disabled="item.bought_id > 0"
                                                        @change="(oldval, newval) => doCalcNewAmtByType(oldval, newval , okey , 'order_amt')"
                                                        v-model="item.order_amt">
                                                    </el-input-number>
                                                </div>
                                            </div>
                                            <div class="flex flex-center package" v-for="(pitem,pkey) in item.packages">
                                                <div class="flex console-desc" v-if="pitem.qty > 0">
                                                    <div class="console-title-item">{{pitem.rel_name}}</div>
                                                    <div class="console-title-item">
                                                        {{pitem.price}}
                                                    </div>
                                                    <div class="console-title-item">
                                                        <el-input-number
                                                            :controls="false"
                                                            size="mini"
                                                            :step="1"
                                                            :step-strictly="true"
                                                            :min="0"
                                                            :disabled="item.valid_type == 2 || item.valid_type == 3"
                                                            :max="pitem.max_nums * item.qty"
                                                            v-model="pitem.qty">
                                                        </el-input-number>
                                                        <el-tooltip style="margin-left: 6px;" effect="dark" :content="'最大可用数量：' + pitem.max_nums" placement="right" v-if="item.valid_type == 1 && itemType != 'bought' && false">
                                                            <i class="el-icon-info"></i>
                                                        </el-tooltip>
                                                    </div>
                                                    <div class="console-title-item">
                                                        <el-input-number
                                                            :controls="false"
                                                            size="mini"
                                                            :step-strictly="true"
                                                            :min="0"
                                                            :disabled="true"
                                                            :max="100"
                                                            v-model="pitem.discount">
                                                        </el-input-number>
                                                    </div>
                                                    <div class="console-title-item">
                                                        <el-input-number
                                                            :controls="false"
                                                            size="mini"
                                                            :step-strictly="true"
                                                            :min="0"
                                                            :disabled="true"
                                                            :max="100"
                                                            v-model="pitem.amt">
                                                        </el-input-number>
                                                    </div>
                                                    <div class="console-title-item">
                                                        <el-link type="danger" size="mini" :underline="false" @click="doItemDelete(pitem,okey,pkey)">移除</el-link>
                                                    </div>
                                                </div>

                                            </div>
                                        </template>
                                        <template v-else>
                                            <div class="flex flex-center">
                                                <div class="flex console-desc">
                                                    <div class="console-title-item">{{item.rel_name}}</div>
                                                    <div class="console-title-item">{{item.price}}</div>
                                                    <div class="console-title-item">
                                                        <el-input-number
                                                            :controls="false"
                                                            size="mini"
                                                            :step="1"
                                                            :step-strictly="true"
                                                            :min="1"
                                                            :max="item.max_nums"
                                                            :disabled="item.bought_id > 0"
                                                            @change="(oldval, newval) => doCalcNewAmtByType(oldval, newval , okey , 'qty')"
                                                            v-model="item.qty">
                                                        </el-input-number>
                                                    </div>

                                                    <div class="console-title-item">
                                                        <el-input-number
                                                            :controls="false"
                                                            :disabled="item.bought_id>0"
                                                            :min="0"
                                                            :max="100"
                                                            size="mini"
                                                            @change="(oldval, newval) => doCalcNewAmtByType(oldval, newval , okey , 'discount')"
                                                            v-model="item.discount">
                                                        </el-input-number>
                                                    </div>
                                                    <div class="console-title-item">
                                                        <el-input-number
                                                            :controls="false"
                                                            size="mini"
                                                            :min="0"
                                                            :max="item.price*item.qty*1000"
                                                            :disabled="item.bought_id>0"
                                                            @change="(oldval, newval) => doCalcNewAmtByType(oldval, newval , okey , 'order_amt')"
                                                            v-model="item.order_amt">
                                                        </el-input-number>
                                                    </div>
                                                    <div class="console-title-item">
                                                        <el-link type="danger" size="mini" :underline="false" @click="doItemDelete(item,okey)">移除</el-link>
                                                    </div>
                                                </div>
                                            </div>
                                        </template>
                                    </div>
                                </template>
                            </template>
                            <template v-else>
                                <el-empty description="请选择消费项目"></el-empty>
                            </template>
                        </div>
                    </div>
                </div>
            </div>
        </el-main>
        <el-footer class="flex flex-center flex-between" style="background-color: #fff; z-index: 100;">
            <div class="flex flex-between consume-summary-wrap" >
                <div class="consume-summary-item">
                    {:lang('Service')}:<span class="consume-summary-item-number">{{ consumeSelected.services }}</span>个
                </div>

                <div class="consume-summary-item">
                    {:lang('Goods')}:<span class="consume-summary-item-number">{{ consumeSelected.goods }}</span>个
                </div>

                <div class="consume-summary-item">
                    {:lang('Package')}:<span class="consume-summary-item-number">{{ consumeSelected.package_nums }}</span>次
                </div>

                <div class="consume-summary-item">
                    优惠金额:<span class="consume-summary-item-number">{{ consumeSelected.disc_amt }}</span>元
                </div>

                <div class="consume-summary-item">
                    应付:<span class="consume-summary-item-number enhence">{{ consumeSelected.order_amt }}</span>元
                </div>
            </div>

            <div>
                <el-button type="primary" @click="doConsume()" :disabled="order_info.length == 0">结 算</el-button>
            </div>
        </el-footer>
    </el-container>

    <!-- 开卡  -->
    <el-dialog title="开卡" :visible.sync="openCardDialog" @close='closeDialog' :close-on-click-modal="false" width="60%">
        <el-form :model="formData" :rules="rules" ref="formData" size="mini" label-width="100px">
            <el-form-item label="所属{:lang('Organ')}" prop="org_id" v-if="!disable_organ">
                <el-select
                :clearable=true
                placeholder="所属{:lang('Organ')}"
                @change="doSwitchOrgan"
                :disabled="organs.length==0"
                v-model="formData.org_id">
                    <el-option v-for="item in organs" :label="item.organ_name" :key="item.id" :value="item.id"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="所属{:lang('School')}" prop="school_id" v-if="!disable_school">
                <el-select
                :clearable=true
                placeholder="所属{:lang('School')}"
                v-model="formData.school_id"
                @change="doSwitchSchool"
                :disabled="schools.length==0"
                filterable>
                    <el-option v-for="item in schools" :label="item.school_name" :key="item.id" :value="item.id"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="真实姓名" prop="full_name">
                <el-input v-model="formData.full_name"></el-input>
            </el-form-item>

            <el-form-item label="手机号码" prop="mobile">
                <el-input type="number" v-model="formData.mobile"></el-input>
            </el-form-item>

            <el-form-item label="{:lang('User Level')}" prop="level_id" v-if="user_levels.length > 0">
                <el-select
                    v-model="formData.level_id"
                    size="small"
                    clearable
                    placeholder="{:lang('User Level')}">
                    <el-option v-for="item in user_levels" :label="item.level_name" :key="item.id" :value="item.id"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="实收金额" prop="now_money">
                <el-input v-model="formData.now_money"></el-input>
            </el-form-item>

            <el-form-item label="赠送金额" prop="gift_money">
                <el-input v-model="formData.gift_money"></el-input>
            </el-form-item>

            <el-form-item label="开卡日期" prop="register_date">
                <el-date-picker
                  v-model="formData.register_date"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期时间">
                </el-date-picker>
            </el-form-item>

            <el-form-item label="结算方式" prop="payment_method" v-if="formData.now_money > 0">
                <div class="pay-method-show flex">
                    <div class="pay-method-item flex flex-column flex-center" :style="{color:(confirmFormData.pay_type==1 ? '#409eff' : '#606266')}" @click="confirmFormData.pay_type=1">
                        <div>
                            <img src="{__FRAME_PATH}images/wxpay.png" />
                        </div>
                        <div>微信支付</div>
                    </div>

                    <div class="pay-method-item flex flex-column flex-center" :style="{color:(confirmFormData.pay_type==2 ? '#409eff' : '#606266')}" @click="confirmFormData.pay_type=2">
                        <div>
                            <img src="{__FRAME_PATH}images/alipay.png" />
                        </div>
                        <div>支付宝</div>
                    </div>

                    <div class="pay-method-item flex flex-column flex-center" :style="{color:(confirmFormData.pay_type==3 ? '#409eff' : '#606266')}" @click="confirmFormData.pay_type=3">
                        <div>
                            <img src="{__FRAME_PATH}images/cash.png" />
                        </div>
                        <div>现金</div>
                    </div>

                    <div class="pay-method-item flex flex-column flex-center" :style="{color:(confirmFormData.pay_type==5 ? '#409eff' : '#606266')}" @click="confirmFormData.pay_type=5">
                        <div>
                            <img src="{__FRAME_PATH}images/pos.png" />
                        </div>
                        <div>POS机</div>
                    </div>
                </div>
            </el-form-item>
        </el-form>
        <el-alert
            v-if="openError!=''"
            :title="openError"
            :closable="false"
            type="error"
            show-icon
            effect="light">
        </el-alert>

        <el-alert
            v-if="openError===false"
            title="开卡成功"
            :closable="false"
            type="success"
            show-icon
            effect="light">
        </el-alert>

        <div slot="footer" class="dialog-footer" v-if="openError!==false">
            <el-button size="small" type="primary" :loading="true" v-if="openCardLoading==true">处理中...</el-button>
            <el-button size="small" type="primary" v-else @click="confirmPay()">确认</el-button>
            <el-button size="small" type="default"  @click="openCardDialog=false">取消</el-button>
        </div>
    </el-dialog>

    <!-- 充值  -->
    <el-dialog title="充值" :visible.sync="rechargeDialog" :close-on-click-modal="false" @close="rechargeClose" width="60%">
        <el-form :model="rechargeFormData" :rules="rechargeRules" ref="rechargeFormData" size="mini" label-width="100px">
            <el-form-item label="单据日期" prop="order_date">
                <el-date-picker
                  v-model="rechargeFormData.order_date"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期">
                </el-date-picker>
            </el-form-item>

            <el-form-item label="会员姓名" prop="full_name">
                <el-input :value="user_info.full_name" :disabled="true"></el-input>
            </el-form-item>

            <el-form-item label="{:lang('User Level')}" prop="level_id">
                <el-select
                    v-model="rechargeFormData.user_info.level_id"
                    size="small"
                    clearable
                    :disabled="user_levels.length==0"
                    placeholder="{:lang('User Level')}">
                    <el-option v-for="item in user_levels" :label="item.level_name" :key="item.id" :value="item.id"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="充值金额" prop="now_money">
                <el-input v-model="rechargeFormData.now_money"></el-input>
            </el-form-item>

            <el-form-item label="赠送金额" prop="gift_money">
                <el-input v-model="rechargeFormData.gift_money"></el-input>
            </el-form-item>

            <el-form-item label="备注" prop="remark">
                <el-input type="textarea" v-model="rechargeFormData.remark" maxlength="200" show-word-limit></el-input>
            </el-form-item>

            <el-form-item label="结算方式" prop="payment_method">
                <div class="pay-method-show flex">
                    <div class="pay-method-item flex flex-column flex-center" :style="{color:(confirmFormData.pay_type==1 ? '#409eff' : '#606266')}" @click="confirmFormData.pay_type=1">
                        <div>
                            <img src="{__FRAME_PATH}images/wxpay.png" />
                        </div>
                        <div>微信支付</div>
                    </div>

                    <div class="pay-method-item flex flex-column flex-center" :style="{color:(confirmFormData.pay_type==2 ? '#409eff' : '#606266')}" @click="confirmFormData.pay_type=2">
                        <div>
                            <img src="{__FRAME_PATH}images/alipay.png" />
                        </div>
                        <div>支付宝</div>
                    </div>

                    <div class="pay-method-item flex flex-column flex-center" :style="{color:(confirmFormData.pay_type==3 ? '#409eff' : '#606266')}" @click="confirmFormData.pay_type=3">
                        <div>
                            <img src="{__FRAME_PATH}images/cash.png" />
                        </div>
                        <div>现金</div>
                    </div>

                    <div class="pay-method-item flex flex-column flex-center" :style="{color:(confirmFormData.pay_type==5 ? '#409eff' : '#606266')}" @click="confirmFormData.pay_type=5">
                        <div>
                            <img src="{__FRAME_PATH}images/pos.png" />
                        </div>
                        <div>POS机</div>
                    </div>
                </div>
            </el-form-item>
        </el-form>

        <el-alert
            v-if="rechargeError!=''"
            :title="rechargeError"
            :closable="false"
            type="error"
            show-icon
            effect="light">
        </el-alert>

        <el-alert
            v-if="rechargeError===false"
            title="充值成功"
            :closable="false"
            type="success"
            show-icon
            effect="light">
        </el-alert>

        <div slot="footer" class="dialog-footer" v-if="rechargeError!==false">
            <el-button size="small" type="primary" :loading="true" v-if="rechargeLoading==true">处理中...</el-button>
            <el-button size="small" type="primary" v-else @click="confirmRecharge()">确认</el-button>
            <el-button size="small" type="default"  @click="rechargeDialog=false">取消</el-button>
        </div>
    </el-dialog>

    <!-- 结算 -->
    <el-drawer
        title="结算明细"
        :visible.sync="consumeConfirm"
        size="74%"
        direction="btt"
        >
       <div class="console-main-wrap flex flex-column flex-between" style="padding:0 20px">
            <el-table
                :data="order_info_merge"
                max-height="300"
                style="width: 100%">
                <el-table-column
                    prop="rel_name"
                    label="{:lang('Service')}/{:lang('Goods')}"
                    >
                </el-table-column>

                <el-table-column
                    prop="price"
                    label="单价"
                    width="100">
                </el-table-column>

                <el-table-column
                    prop="qty"
                    label="数量"
                    width="100">
                </el-table-column>

                <el-table-column
                    prop="disc_amt"
                    label="折扣金额"
                    width="100">
                </el-table-column>

                <el-table-column
                    prop="price"
                    label="单项小计"
                    width="100">
                    <template slot-scope="scope">
                        {{ scope.row.qty * scope.row.price - scope.row.disc_amt }}
                    </template>
                </el-table-column>
            </el-table>
       </div>

       <div class="" style="position: fixed; bottom:0; width: 100%;padding: 20px; border-top: 1px solid var(--borderColor);">
            <div class="flex flex-between padding-10">
                <div class="flex flex-between" style="width:88%">
                    <div class="pay-method-show flex">
                        <div class="pay-method-item flex flex-column flex-center" :style="{color:(confirmFormData.pay_type==1 ? '#409eff' : '#606266')}" @click="confirmFormData.pay_type=1">
                            <div>
                                <img src="{__FRAME_PATH}images/wxpay.png" />
                            </div>
                            <div>微信支付</div>
                        </div>

                        <div class="pay-method-item flex flex-column flex-center" :style="{color:(confirmFormData.pay_type==2 ? '#409eff' : '#606266')}" @click="confirmFormData.pay_type=2">
                            <div>
                                <img src="{__FRAME_PATH}images/alipay.png" />
                            </div>
                            <div>支付宝</div>
                        </div>

                        <div class="pay-method-item flex flex-column flex-center" :style="{color:(confirmFormData.pay_type==3 ? '#409eff' : '#606266')}" @click="confirmFormData.pay_type=3">
                            <div>
                                <img src="{__FRAME_PATH}images/cash.png" />
                            </div>
                            <div>现金</div>
                        </div>

                        <div class="pay-method-item flex flex-column flex-center" :style="{color:(confirmFormData.pay_type==4 ? '#409eff' : '#606266')}" @click="confirmFormData.pay_type=4" v-show="user_info.total_money>=consumeSelected.order_amt">
                            <div>
                                <img src="{__FRAME_PATH}images/user_card.png" />
                            </div>
                            <div class="flex flex-column flex-center">
                                <div>会员卡</div>
                                <div class="money-color">￥{{user_info.total_money}}</div>
                            </div>
                        </div>

                        <div class="pay-method-item flex flex-column flex-center" :style="{color:(confirmFormData.pay_type==5 ? '#409eff' : '#606266')}" @click="confirmFormData.pay_type=5">
                            <div>
                                <img src="{__FRAME_PATH}images/pos.png" />
                            </div>
                            <div>POS机</div>
                        </div>

                    </div>

                    <div class="" v-if="storeNewCustomer==true">
                        <el-form :model="newCustomerFormData" :rules="newCustomerFormRules" ref="newCustomerFormData" label-width="80px" size="small" >
                            <el-form-item label="姓名" prop="full_name">
                                <el-input v-model="newCustomerFormData.full_name" placeholder="请输入姓名"></el-input>
                            </el-form-item>

                            <el-form-item label="手机" prop="mobile">
                                <el-input v-model="newCustomerFormData.mobile" placeholder="请输入手机号码"></el-input>
                            </el-form-item>
                        </el-form>
                   </div>
                </div>
                <div class="flex flex-between" style="padding:20px 0; align-items: flex-end;width: 10%;">
                    <div class="flex money-color" style="align-items: baseline;">
                        <div>￥</div>
                        <div class="money-size">{{ consumeSelected.order_amt }}</div>
                    </div>
                </div>
            </div>

            <div class="flex flex-center flex-between">
                <div class="" style="width:88%">
                    <el-form size="mini" :model="confirmFormData">
                        <el-input type="textarea" placeholder="请输入备注信息" v-model="confirmFormData.remark"></el-input>
                    </el-form>
                </div>

                <div class="checkout-button-wrap">
                    <template v-if="consumeStatus==true">
                        <el-link type="success" :underline="false" size="mini">结算成功</el-link>
                    </template>
                    <template v-else>
                        <el-button type="primary" size="medium" :loading="true" v-if="consumeLoading==true">处理中...</el-button>
                        <el-button type="primary" size="medium" v-else @click="doConfirmConsume()" :disabled="!confirmFormData.pay_type">确 定</el-button>
                    </template>
                </div>
            </div>
        </div>
    </el-drawer>
</div>
{/block}
{block name="script"}
<script>
    var my = new Vue({
        el: "#myApp",
        data(){
            return {
                // 消费相关
                consumeSelected:{
                    services:0,
                    goods:0,
                    package_nums:0,
                    amt:0,
                    disc_amt:0,
                    order_amt:0
                },
                consumeConfirm:false,
                consumeLoading:false,
                consumeStatus:false,
                // 开卡
                openCardLoading: false,
                openCardDialog:false,
                openError:'',
                formData: {
                    id: '',
                    org_id:default_org_id || '',
                    school_id:default_school_id || '',
                    full_name: '',
                    mobile: '',
                    level_id: '',
                    now_money: 0,
                    gift_money: '',
                    register_date: new Date(),
                },
                rules: {
                    full_name: [
                        { required: true, message: '此项不能为空', trigger: 'blur' },
                    ],
                    mobile: [
                        { required: true, message: '此项不能为空', trigger: 'blur' },
                    ]
                },
                rechargeRules:{
                    now_money:[
                        { required: true, message: '此项不能为空', trigger: 'blur' },
                    ],
                    payment_method:[
                        { required: true, message: '此项不能为空', trigger: 'blur' },
                    ]
                },
                newCustomerFormRules:{
                    full_name:[
                        { required: true, message: '此项不能为空', trigger: 'blur' },
                    ],
                    mobile:[
                        { required: true, message: '此项不能为空', trigger: 'blur' },
                    ]
                },
                user_levels:[],
                organs: [],
                schools: [],
                disable_organ: default_org_id > 0 ? true : false,
                disable_school: default_school_id > 0 ? true : false,
                confirmFormData:{
                    order_id:0,
                    pay_type:0,
                    remark:''
                },
                order_info:[],
                order_info_merge:[],
                order_ukey:[],
                user_info:{
                    uid:0,
                    full_name:'',
                    mobile:'',
                    school_name:'',
                    level_id:0,
                    level_name:'',
                    discount:0,
                    total_money:0,
                    now_money:0,
                    gift_money:0,
                    org_id:0,
                    school_id:0
                },
                user_mobile:'',
                itemType:'service',
                itemUrl:'service.service',
                rowsCount: 0,
                rows: [],
                where:{
                    name:'',
                    page:1,
                    limit:8
                },
                // 充值相关
                rechargeDialog:false,
                rechargeError:'',
                rechargeLoading:false,
                rechargeFormData:{
                    "order_date": "", //单据日期 2021-08-10
                    "remark": "", //备注
                    "now_money": 0, //充值金额
                    "gift_money": 0, //赠送金额
                    "user_info": {
                        "uid": 0, //用户ID
                        "level_id": 0 //等级ID
                    }
                },
                storeNewCustomer:false,
                newCustomerFormData:{
                    full_name:'',
                    mobile:''
                }
            }
        },
        methods: {
            doLoadOrgans () {
                axios.get(Url({c:'teachaffair.organ',a:'get_all' , q:{org_id:default_org_id}}))
                    .then(res => {
                        this.organs = res.data.data
                    })
            },
            doSwitchOrgan (org_id) {
                this.formData.school_id = ''
                this.doLoadSchools(org_id)
            },
            doSwitchSchool (school_id) {
                this.doLoadUserLevels(this.formData.org_id,school_id)
            },
            doLoadSchools (org_id) {
                axios.get(Url({c:'supervision.school',a:'get_all' , q:{org_id:org_id}}))
                    .then(res => {
                        this.schools = res.data.data
                    })
            },
            // 关闭开卡弹窗
            closeDialog () {
                this.formData = {
                    id: '',
                    org_id:'',
                    school_id:'',
                    full_name: '',
                    mobile: '',
                    level_id: '',
                    now_money: 0,
                    gift_money: '',
                    register_date: new Date(),
                }

                this.openError = ''
                this.openCardLoading = false
            },
            // 关闭充值弹窗
            rechargeClose () {
                this.rechargeError = ''
                this.rechargeLoading = false
                this.rechargeFormData.order_date = ''
                this.rechargeFormData.remark = ''
                this.rechargeFormData.now_money = 0
                this.rechargeFormData.gift_money = 0
            },
            doLoadUserLevels (org_id,school_id) {
                axios.get(Url({c:'user.user_level',a:'get_all' , q:{org_id:org_id,school_id:school_id}}))
                    .then(res => {
                        this.user_levels = res.data.data
                    })
            },
            openCard () {
                this.openCardDialog = true
                if ( default_org_id > 0 && default_school_id > 0 ) {
                    this.doLoadUserLevels(default_org_id , default_school_id)
                }
            },
           doSaveOpenCard: async function() {
                await axios.post( Url({c:'user.user',a:'opencard'}) , this.formData)
                .then(res => {
                    if ( res.data.code != 200 ) {
                        this.openCardLoading = false
                        return this.$message.error(res.data.msg)
                    }

                    this.confirmFormData.order_id = res.data.data.order_id || 0
                }).catch(_ => {
                    this.openError = '操作失败'
                })
            },
            // 确认开卡
            confirmPay: async function () {
                if ( !this.formData.full_name ) return this.openError = '姓名不能为空';
                if ( !this.formData.mobile ) return this.openError = '手机号不能为空';
                if ( !isMobile(this.formData.mobile) ) return this.openError = '手机号格式不正确';
                // if ( !this.formData.level_id ) return this.openError = '会员等级不能为空';

                this.openCardLoading = true

                await this.doSaveOpenCard()

                if ( this.confirmFormData.order_id > 0 ) {
                    axios.post( Url({c:'financial.order',a:'confirm'}) , this.confirmFormData).then(res => {
                        this.openCardLoading = false
                        this.openError = false
                        this.openCardDialog = false

                        if ( res.data.code == 200 ) {
                            return this.$message.success('开卡成功')
                        }

                        return this.$message.error(res.data.msg)
                    }).catch(_ => {
                        this.openError = '操作失败'
                    })
                }
            },
            // 搜索用户
            searchUser: function () {
                this.user_info.uid = 0
                if ( this.user_mobile != '' ) {
                    return axios.post( Url({c:'user.user',a:'query'}) , {mobile:this.user_mobile})
                        .then(res => {
                            if ( res.data.code == 200 ) {
                                this.user_info = res.data.data
                                this.storeNewCustomer = false
                            } else {
                                return this.$message.error(res.data.msg);
                            }
                        }).catch(_ => {
                        return this.$message({
                            message: '未查到用户',
                            type: 'error'
                        })
                    });
                }
                return this.$message.error('手机号码不能为空');
            },
            // 充值
            recharge: function () {
                if ( !this.user_info.uid ) {
                    return this.$message.error('请先选择用户再充值');
                }

                this.rechargeFormData.user_info.uid = this.user_info.uid
                this.rechargeFormData.user_info.level_id = this.user_info.level_id

                this.rechargeDialog = true

                // 加载用户等级
                this.doLoadUserLevels(this.user_info.org_id , this.user_info.school_id)
            },
            confirmRecharge: async function () {
                if ( !this.rechargeFormData.now_money ) return this.rechargeError ='充值金额不能为0';
                if ( !this.confirmFormData.pay_type ) return this.rechargeError ='请选择结算方式';

                this.rechargeLoading = true
                await axios.post( Url({c:'financial.recharge',a:'save'}) , this.rechargeFormData)
                    .then(res => {
                        this.confirmFormData.order_id = res.data.data.order_id || 0
                    }).catch(_ => {
                    this.$message({
                        message: '操作失败',
                        type: 'error'
                    })
                })

                if ( this.confirmFormData.order_id > 0 ) {
                    axios.post( Url({c:'financial.order',a:'confirm'}) , this.confirmFormData).then(res => {
                        this.rechargeLoading = false
                        this.rechargeError = false
                        this.$message.success('充值成功')
                        this.rechargeDialog = false
                        this.searchUser()
                    }).catch(_ => {
                        this.rechargeError ='操作失败';
                    })
                }
            },
            doLoadRows (page) {
                if ( this.itemUrl == '' ) {
                    return this.message.error("地址错误，请稍后重试")
                }
                this.where.org_id = default_org_id
                this.where.school_id = default_school_id
                this.where.page  = page || 1
                axios.get(Url({c:this.itemUrl,a:'get_list' , q:this.where}))
                    .then(res => {
                        this.rows = res.data.data
                        this.rowsCount =res.data.count
                    })
            },
            setItemType (type) {
                this.itemType = type

                if ( this.itemType == 'service' ) {
                    this.itemUrl = 'service.service'
                }

                if ( this.itemType == 'goods' ) {
                    this.itemUrl = 'goods.goods'
                }

                if ( this.itemType == 'package' ) {
                    this.itemUrl = 'package.package'
                }

                if ( this.itemType == 'bought' ) {
                    this.where.uid = this.user_info.uid
                    this.itemUrl = 'user.bought'
                }

                this.where.name = ''
                this.doLoadRows()
            },
            doItemSelect (item) {
                let bought_type = this.itemType
                if ( this.itemType == 'bought' ) {
                    if ( item.rel_type != undefined ) {
                        bought_type = item.rel_type
                    }
                }
                axios.post( Url({c:'financial.consume',a:'precheck'}) , {bought_type:bought_type,bought_id:item.bought_id || 0,id:item.id})
                    .then(res => {
                        if ( res.data.code == 200 ) {
                            let ukey = res.data.data.item_ukey || ''

                            for ( const j in this.order_info ) {
                                let _oitem = this.order_info[j]

                                if ( _oitem.item_ukey != undefined && _oitem.item_ukey == ukey ) {
                                    _oitem.qty      += 1
                                    _oitem.amt       = _oitem.price * _oitem.qty
                                    _oitem.order_amt = _oitem.price * _oitem.qty
                                    return;
                                }
                            }

                            let _item = {
                                discount:this.user_info.discount || 100,
                                amt:res.data.data.price * 1,
                                order_amt:res.data.data.price * 1,
                            }
                            this.order_info.push(Object.assign(_item,res.data.data))
                        } else {
                            return this.$message.error(res.data.msg);
                        }
                }).catch(_ => {
                    console.log('异常：' , _)
                    return this.$message.error('操作异常')
                });
                console.log(this.order_info)
            },
            doItemDelete ( item , okey , pkey ) {
                if ( okey != undefined ) {
                    let _oitem = this.order_info[okey];

                    if ( _oitem.valid_type == 1 && item.qty > 0 ) {
                        item.qty--

                        let package_nums = 0

                        for ( const pk in _oitem.packages ) {
                            let _pv = _oitem.packages[pk]

                            package_nums += _pv.qty
                        }

                        if ( package_nums == 0 ) {
                            return this.order_info.splice(okey,1)
                        }
                        return
                    }

                    if ( pkey != undefined ) {
                        this.order_info[okey].packages.splice(pkey,1)

                        if ( this.order_info[okey].packages.length > 0 ) {
                            return;
                        }
                    }

                    return this.order_info.splice(okey,1)
                }
            },
            doConsume () {
                this.order_info_merge = []
                for ( const i in this.order_info ) {
                    let _oitem = this.order_info[i]

                    if ( _oitem.pck_id > 0 && _oitem.packages.length > 0 ) {
                        for ( const j in _oitem.packages ) {
                            let _pitem = _oitem.packages[j]

                            this.order_info_merge.push(_pitem)
                        }
                    } else {
                        this.order_info_merge.push(_oitem)
                    }
                }

                this.confirmFormData.pay_type = 0
                this.consumeConfirm = true
            },
            async doConfirmConsume () {
                if ( !this.consumeSelected.order_amt ) return this.$message.error('消费金额不能为0');
                if ( !this.confirmFormData.pay_type ) return this.$message.error('请选择支付方式');

                this.consumeLoading = true

                // 是否是散客消费了套餐
                if ( this.storeNewCustomer ) {
                    if ( !this.newCustomerFormData.full_name ) return this.$message.error('顾客名称不能为空');
                    if ( !this.newCustomerFormData.mobile ) return this.$message.error('顾客手机不能为空');

                    await axios.post( Url({c:'user.user',a:'create_consumer'}) , this.newCustomerFormData)
                    .then(res => {
                        this.user_info = res.data.data || []
                    }).catch(_ => {
                        this.consumeLoading = false
                        this.$message.error('操作失败-=-')
                    })

                    if ( !this.user_info.uid ) return this.$message.error('记录顾客信息失败');
                }

                let consumeFormData = {
                    order_info:this.order_info,
                    user_info:this.user_info
                }

                await axios.post( Url({c:'financial.consume',a:'save'}) , consumeFormData)
                .then(res => {
                    this.confirmFormData.order_id = res.data.data.order_id || 0
                }).catch(_ => {
                    this.consumeLoading = false
                    this.$message.error('操作失败-=-')
                })

                if ( this.confirmFormData.order_id > 0 ) {
                    axios.post( Url({c:'financial.consume',a:'confirm'}) , this.confirmFormData).then(res => {
                        this.consumeLoading = false
                        if ( res.data.code == 200 ) {
                            this.consumeStatus = false
                            this.order_info_merge = []
                            this.order_info = []
                            this.consumeConfirm = false

                            if ( this.confirmFormData.pay_type == 4 ) {
                                this.searchUser()
                            }
                            return this.$message.success('操作成功')
                        }
                        return this.$message.error(res.data.msg)
                    }).catch(_ => {
                        this.consumeLoading = false
                        this.$message.error('操作失败-=-')
                    })
                }
            },
            doCalcNewAmtByType ( newval , oldvale ,okey , type ) {
                let _oitem_amt = this.order_info[okey].price * this.order_info[okey].qty

                this.order_info[okey].amt = _oitem_amt

                if ( type == 'order_amt' ) {
                    precicus = (100 - (_oitem_amt -  newval) / _oitem_amt * 100).toFixed(12);
                    this.order_info[okey].discount  = parseFloat(precicus).toFixed(2)
                    this.order_info[okey].disc_amt  = _oitem_amt * (100 - precicus) / 100
                }

                if ( type == 'discount' ) {
                    this.order_info[okey].order_amt = (_oitem_amt * newval / 100).toFixed(2)
                    this.order_info[okey].disc_amt  = _oitem_amt - this.order_info[okey].order_amt
                }

                if ( type == 'qty' ) {
                    _oitem_amt = this.order_info[okey].price * newval
                    this.order_info[okey].disc_amt  = _oitem_amt * (100 - this.order_info[okey].discount) / 100
                    this.order_info[okey].order_amt = (_oitem_amt - this.order_info[okey].disc_amt).toFixed(2)

                    console.log(this.order_info[okey].disc_amt , this.order_info[okey].order_amt)
                }
            }
        },
        mounted(){
            this.doLoadRows()
            this.doLoadOrgans()
            if ( default_org_id > 0 || this.where.org_id > 0 ) {
                org_id = default_org_id || this.where.org_id
                this.doLoadSchools(org_id)
            }
        },
        watch : {
            order_info : {
                handler(n,o) {
                    let package_nums = 0
                    let services = 0
                    let goods = 0
                    let amt = 0
                    let disc_amt = 0
                    let order_amt = 0

                    /** 循环订单 */
                    for (const i in n) {
                        let _oitem = n[i]

                        // 套餐
                        if ( _oitem.pck_id > 0 && _oitem.packages.length > 0 ) {
                            if ( _oitem.valid_type == 1 ) {
                                for (const j in _oitem.packages ) {
                                    let _pitem = _oitem.packages[j]
                                    package_nums += _pitem.qty
                                }
                            } else {
                                package_nums += _oitem.qty
                            }
                        }
                        _oitem.disc_amt = _oitem.amt - _oitem.order_amt
                        amt += _oitem.amt
                        disc_amt += _oitem.disc_amt
                        order_amt += _oitem.order_amt
                        if ( _oitem.rel_type == 'service' ) {
                            services += _oitem.qty
                        }
                        if ( _oitem.rel_type == 'goods' ) {
                            goods += _oitem.qty
                        }
                    }
                    this.consumeSelected.package_nums = package_nums
                    this.consumeSelected.services = services
                    this.consumeSelected.goods = goods
                    this.consumeSelected.amt = amt.toFixed(2)
                    this.consumeSelected.disc_amt = disc_amt.toFixed(2)
                    this.consumeSelected.order_amt = order_amt.toFixed(2)

                    if ( this.consumeSelected.disc_amt < 0 ) this.consumeSelected.disc_amt = '-'

                    if ( this.consumeSelected.package_nums > 0 && this.user_info.uid == 0 ) {
                        this.storeNewCustomer = true
                    } else {
                        this.storeNewCustomer = false
                    }
                },
                immediate: false,
                deep:true
            }
        },
        computed:{

        }
    })
</script>
{/block}